<template>
	<div class="home">
		<div class="ele">
			<router-link to="/">
				<span class="ele_me">ele.me</span>
			</router-link>
			<router-link to="/log.in">
				<span class="login_zhuce">登录|注册</span>
			</router-link>
		</div>
		<div class="dw">
			<span>当前定位城市：</span>
			<span class="dw_dw">定位不准时，请在城市列表中选择</span>
		</div>
		<router-link :to="{name:'dingwei',query:{id:guess.id,name:guess.name}}" class="cs">
			<span class="cs_cs">{{guess.name}}</span>
			<img src="../../public/next.png" alt="">
		</router-link>

		<div class="rm">
			<div class="rmcs">热门城市</div>
			<ul class="rmcs_ul">
				<router-link v-for="(val,key) in hot" :key="key" :to="{name:'dingwei',query: {id:val.id,name:val.name}}" tag="li"
				 class="val">
					{{val.name}}
				</router-link>
			</ul>
		</div>
		<sycs />
	</div>
</template>

<script>
	import sycs from "../components/sycs_d"
	export default {
		name: "chengshi",
		data() {
			return {
				guess: "",
				hot: [],
			}
		},
		created() {
			let obj = this;
			this.$axios({
				url: 'https://elm.cangdu.org/v1/cities?type=guess',
				method: "get",
				data: {
					guess: this.guess
				}
			}).then(function(res) {
				window.console.log(res.data);
				obj.guess = res.data
			});
			this.$axios({
				url: "https://elm.cangdu.org/v1/cities?type=hot",
				method: "get",
			}).then(function(res) {
				window.console.log(res.data);
				for (let i = 0; i < res.data.length; i++) {
					obj.hot.push(res.data[i])
				}
				window.console.log(obj.hot);
			})
		},
		methods: {

		},
		components: {
			sycs
		}
	}
</script>
<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.ele {
		background-color: #3190e8;
		width: 100%;
		height: 92px;
		color: white;
		font-size: 30px;
		position: relative;
	}

	.ele_me {
		position: absolute;
		color: white;
		left: 20px;
		top: 25px;
	}

	.login_zhuce {
		text-decoration: none;
		position: absolute;
		color: white;
		right: 20px;
		top: 25px;
	}

	.dw {
		display: flex;
		justify-content: space-between;
		line-height: 1.45rem;
		padding: 0 .45rem;
		padding: 10px;
		font-size: 25px;
		border-bottom: 1px solid #e4e4e4;
		background-color: white;
	}

	.dw_dw {
		color: #9f9f9f;
		font-weight: bold
	}

	.cs {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: 4px solid #e4e4e4;
		font-size: 35px;
		text-decoration: none;
		background-color: white;
		margin-bottom: 18px;
	}

	.cs_cs {
		color: #3190e8;
	}

	.cs img {
		width: 28px;
		height: 28px;
	}

	li {
		list-style: none;
	}

	.val {
		float: left;
		text-align: center;
		color: #3190e8;
		border-bottom: 1px solid #e4e4e4;
		border-right: 1px solid #e4e4e4;
		width: 25%;
		height: 82px;
		line-height: 82px;
		box-sizing: border-box;
		background-color: white;
	}

	a {
		text-decoration: none;
		color: #000000;
	}

	.rm {
		background-color: white;
		margin-bottom: 18px;
	}

	.rmcs_ul {
		zoom: 1;
		padding: 0;
		margin: 0;
		list-style: none;
		font-style: normal;
		text-decoration: none;
		border: none;
		color: #333;
		font-weight: 400;
		font-family: Microsoft Yahei;
		box-sizing: border-box;
		-webkit-tap-highlight-color: transparent;
		-webkit-font-smoothing: antialiased;
	}

	.rmcs_ul:after {
		content: "";
		display: block;
		clear: both;
	}

	.rmcs {
		color: #666;
		font-weight: 400;
		text-indent:21px;
		border-top: 2px solid #e4e4e4;
		border-bottom: 1px solid #e4e4e4;
		font: 26px/68px Helvetica Neue;
	}
</style>
